<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象封装消息提示</title>
    <style>
        .模态框 {
            width: 300px;
            min-height: 100px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            position: fixed;
            z-index: 999;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            background-color: #fff;
        }

        .模态框 .提示标题 {
            line-height: 40px;
            padding: 0 10px;
            position: relative;
            font-size: 20px;
        }

        .模态框 .提示标题 i {
            font-style: normal;
            color: #999;
            position: absolute;
            right: 15px;
            top: -2px;
            cursor: pointer;
        }

        .模态框 .提示内容 {
            text-align: center;
            padding: 10px;
        }

        .模态框 .footer {
            display: flex;
            justify-content: flex-end;
            padding: 10px;
        }

        .模态框 .footer a {
            padding: 3px 8px;
            background: #ccc;
            text-decoration: none;
            color: #fff;
            border-radius: 2px;
            margin-right: 10px;
            font-size: 14px;
        }

        .模态框 .footer a.submit {
            background-color: #369;
        }
    </style>
</head>
<body>

<button id="删除">删除</button>
<button id="登录">登录</button>

<!-- <div class="模态框">
  <div class="提示标题">温馨提示 <i>x</i></div>
  <div class="提示内容">您没有删除权限操作</div>
</div> -->

<!--
目的： 练习面向对象写插件（模态框）
说明: 这里重要是练习 面向对象的思想, 这里的 构造函数你可以看作一个模板
模板 创建对象, 对象赋值数据
-->

<script>

    // 创建一个 构造函数, 原来封装 模态框
    function 模态框(提示标题 = '', 提示内容 = '') { // 传参
        // 创建div 模态框盒子, 这里盒子是公共的
        // 创建 div标签, 这样我们是构造函数 对象属性前面要加 this
        this.模态框盒子 = document.createElement('div') // 创建一个新的元素节点, 注意是标签节点不是DOM元素
        // 给标签添加一个CSS类名
        this.模态框盒子.className = '模态框'
        // 模态框盒子里, 在写2个div标签 修改文字内容
        this.模态框盒子.innerHTML = `
                <div class="提示标题">${提示标题} <i>x</i></div>
                <div class="提示内容">${提示内容}</div>
        `
        // console.log(this.模态框盒子)
    }

    // 上面是构造函数,相当于模板. 下面添加 原型对象存储公共的方法
    模态框.prototype.打开_模态框 = function () {
        // 解决一个小BUG,多次点击按钮,会多次添加 模态框盒子 (<div class="模态框"> 内容)
        // 先判断是否存在 模态框盒子, 有删除,没有添加
        const 模态框盒子 = document.querySelector('.模态框') // 获取DOM元素
        // 模态框盒子 && 模态框盒子.remove('模态框') // 短路写法. 不存在'模态框盒子'这个元素,就不在执行后面的,否则执行后面代码
        if (模态框盒子) {
            模态框盒子.remove('模态框') // 如果检查有 '模态框盒子', 就删除标签里这个CSS类, 达到不显示弹窗的效果
        }


        // 注意: 这里不要使用箭头函数, 因为我们需要this指向 实例对象
        // 把创建的 模态框,显示在页面上. 即添加到 body标签里
        document.body.appendChild(this.模态框盒子) // 插入 标签节点

        // 监控 点击事件,调用 '关闭_模态框'方法, 关闭弹窗
        const 八叉 = this.模态框盒子.querySelector('.模态框 i') // 八叉在 i标签 里
        八叉.addEventListener('click', () => {
            // 这里要用箭头函数,箭头函数没有this
            // 所以this指向它的上一级,实例对象
            this.关闭_模态框()
        })
    }

    模态框.prototype.关闭_模态框 = function () {
        // 把弹窗(模态框), 关闭
        this.模态框盒子.remove('模态框') // 删除这个CSS类, 达到不显示弹窗的效果
    }


    // ----- 点击按钮 有相应的弹窗提示 -----

    const 删除按钮 = document.querySelector('#删除')
    删除按钮.addEventListener('click', () => {
        // 先调用 构造函数, 实际就是先 实例化对象
        const 删除提示 = new 模态框('温馨提示', '您没有权限删除') // 实例化对象,并且传参
        // 调用 原型对象里的 '打开_模态框' 方法
        删除提示.打开_模态框()
    })

    const 登录按钮 = document.querySelector('#登录')
    登录按钮.addEventListener('click', () => {
        // 先调用 构造函数, 实际就是先 实例化对象
        const 登录提示 = new 模态框('友情提示', '您还么有注册账号') // 实例化对象,并且传参
        // 调用 原型对象里的 '打开_模态框' 方法
        登录提示.打开_模态框()
    })
</script>

</body>
</html>